<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>logo设置</title>
    <link rel="stylesheet" href="css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="css/myelement.css" th:href="@{/css/myelement.css}"/>
    <script src="js/vue221.js" th:src="@{/js/vue.js}"></script>
    <script src="js/element.js" th:src="@{/js/element.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content">
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">LOGO设置</h1>
            <div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>设置</div>
        </div><!-- 页面头部 end -->
        <div class="main-content-body">
            <div class="view-order">
                <div class="view-item">
                    设置商城前后台展示的LOGO图片，分为正方形LOGO和长方形LOGO，正方形：240*240,长方形：240*90，图片为jpg\png格式，大小不超过500K：
                </div>
            </div>
            <ul class="logoseeting-list">
                <li>
                    <h2>正方形LOGO</h2>
                    <div class="upload-image-box" v-bind:class="{ noImage: !uploadImage.imageUrl }" @click="showDialogImage($event,'zimg')" data-image="uploadImage" style="width:250px;height:250px;">
                        <div v-show="uploadImage.imageUrl" class="upload-image">
                            <img :src="uploadImage.imageUrl">
                            <!-- <span class="upload-operate">点击修改</span> -->
                            <span class="upload-operate upload-operate-delect" @click.stop="delectImage('uploadImage')">点击删除</span>
                        </div>
                        <span v-show="!uploadImage.imageUrl" class="upload-button">
                            <i class="upload-icon"></i>
                            上传正方形LOGO
                        </span>
                    </div>
                </li>
                <li>
                    <h2>长方形LOGO</h2>
                    <div class="upload-image-box" v-bind:class="{ noImage: !uploadImage2.imageUrl }" @click="showDialogImage($event,'cimg')" data-image="uploadImage2" style="width:250px;height:250px;">
                        <div v-show="uploadImage2.imageUrl" class="upload-image">
                            <img :src="uploadImage2.imageUrl">
                            <!-- <span class="upload-operate">点击修改</span> -->
                            <span class="upload-operate upload-operate-delect" @click.stop="delectImage('uploadImage2')">点击删除</span>
                        </div>
                        <span v-show="!uploadImage2.imageUrl" class="upload-button">
                            <i class="upload-icon"></i>
                            上传长方形LOGO
                        </span>
                    </div>
                </li>
            </ul>
            <div class="edit-button z-yuan-butn">
                <el-button type="primary" @click="setting">确定</el-button>
                <el-button @click="cancel">取消</el-button>
            </div>
        </div>
    </div>

    <!-- 上传图片模态框 -->
    <el-dialog title="上传文件" :visible.sync="dialogImageVisible">
        <el-upload
                ref="upload"
                action="/fastdfs/file/uploadFile"
                :multiple=false
                list-type="picture"
                :show-file-list="false"
                :on-success="dosuccess"
                :before-upload="beforeAvatarUpload">
            <el-button size="medium">+&nbsp;点击选择图片</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogImageVisible = false">取 消</el-button>
        </div>
    </el-dialog>
    <!-- 上传图片模态框 end -->
</div>
</body>
<script src="js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>

<script th:inline="javascript">
    new Vue({
        el: "#app",
        data: {
            dialogImageVisible: false,  // 上传图片模态框是否显示
            // 上传正方形图片数据
            uploadImage: {
                imageUrl: [[${dto.zimg}]],
                fileList: []
            },
            // 上传长方形图片数据
            uploadImage2: {
                imageUrl: [[${dto.cimg}]],
                fileList: []
            },
            logo: [[${dto}]],
            imgFlag: '',//'zimg' or 'cimg'
        },
        methods: {
            // 显示图片上传模态框
            showDialogImage(e, imgFlag){
                this.imgFlag = imgFlag;
                this.dialogImageVisible = true;
                this.dialogImage = e.currentTarget.dataset.image;

            },
            // 图片上传前校验
            beforeAvatarUpload(file) {
                const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
                const isLt2M = file.size / 1024 < 500;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 500kb!');
                }
                return isJPG && isLt2M;
            },
            // 图片状态变化监听,选择图片后执行的事件
           /* handleChange(file, fileList) {
                this[this.dialogImage].fileList = fileList.slice(-1);
                this[this.dialogImage].imageUrl = URL.createObjectURL(file.raw);
                this.dialogImageVisible = false;
            },*/
            dosuccess:function(response, file, fileList){
                if(this.imgFlag == "zimg"){
                    this.logo.zimg = response.fdfsIpPre + response.fullPath;
                    //this.fileName = file.name;
                    this.uploadImage.imageUrl = response.fdfsIpPre + response.fullPath;
                    this.uploadImage.fileList = fileList.slice(-1);
                    //this[this.dialogImage].imageUrl = URL.createObjectURL(file.raw);
                    this.dialogImageVisible = false;
                }else if(this.imgFlag == "cimg"){
                    this.logo.cimg = response.fdfsIpPre + response.fullPath;
                    //this.fileName = file.name;
                    this.uploadImage2.imageUrl = response.fdfsIpPre + response.fullPath;
                    this.uploadImage2.fileList = fileList.slice(-1);
                    this.dialogImageVisible = false;
                }

            },
            // 删除图片事件
            delectImage(file, fileList){
                var self = this;
                var img = "";
                if(file == "uploadImage"){
                    img = this.logo.zimg;
                }else if(file == "uploadImage2"){
                    img = this.logo.cimg;
                }
                $.post("/fastdfs/file/deleteFile",
                    {"fullPath":img},
                    function(data) {
                        var obj = eval('(' + data + ')');
                        if(obj.returnCode){
                            if(file == "uploadImage"){
                                self.logo.zimg = "";
                                self.uploadImage.imageUrl = "";
                                self.uploadImage.fileList=[];
                            }else if(file == "uploadImage2"){
                                self.logo.cimg = "";
                                self.uploadImage2.imageUrl = "";
                                self.uploadImage2.fileList=[];
                            }

                        }
                    }
                );
            },
            setting: function () {
                var self = this;
                $.ajax({
                    url: "/backstage/basicdata/logo/setting",
                    type: "POST",
                    data: JSON.stringify(self.logo),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function(data) {
                        if (data && data.returnCode == "1") {
                            self.$message({
                                message: '设置成功',
                                type: 'success',
                                customClass: 'message-center',
                                duration: 1500
                            });
                        } else {
                            self.$message({
                                message: '设置失败',
                                type: 'error',
                                customClass: 'message-center',
                                duration: 1500
                            });
                        }
                    }
                });
            },
            cancel: function (){
                history.back(-1);
            }
        }
    });
</script>
</html>
